3.8 How to dim a certain area?

Test: This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.

Sign In

Click me, and I will disappear.

    Another example: menu for TruQA
      • Sign In
      • Join
      • Forgot Password
    Try 'Sign In' in the above menu. You will write the code for modal windows, such as 'Sign In window' in the above exampe, later.

  1. How to dim a certain area? Any good idea?
    • Display a rectangle over a certain area with a certain color, and control the opacity of the rectangle.
    • How?
      • Read all in CSS3 opacity Property.
      • Here is an example that displays the blanket and the signin-box within an outer box. (Note that the banket should be displayed over any other content except the signin-box and the signin-box is displayed over every content.) 
        <style>
    #blanket {
        ???: ???;  /* initially hidden */
        position: ???; top:???; left:???;  /* full area */
        width:???; height: ???;  /* full area; you may use %, or vw and vh */
        background-color:SlateGray; opacity: 0.5;  /* make the underlying elements visible */
        z-index: 9000;  /* over all elements except the signin-box */
    }
    #signin-box {
        ???: ???;  /* initially hidden */
        width: 400px; border: 1px solid Blue; background-color:White;
        position: ???; top: 100px; left: calc(50% - 200px); 
        ???: 9001;  /* over all elements */
    }
</style>
    
<div style='border:1px solid Black; width:500px; height:400px; position:???'>
    <button id='menu-signin'>Sign In</button>
    <div id='blanket'></div>
    <div id='signin-box' class='modal-window'>
        <h2 style='text-align:center'>Sign In</h2>
        <br>
        <form ...>
            ...
        </form>
    </div>
</div>
    
<script>
    ????(???, show_signin_box);  // When the SignIn button is clicked
    ????(???, hide_signin_box);  // When the mouse is clicked on the blanket
    ??? show_signin_box() {
        ????('blanket').???? = ???;  // need to show
        ????('signin-box').???? = ???;  // need to show
    }
    ??? hide_signin_box() {
        ????  // need to hide them all, including the blanket
    }
</script>
      • Trial 1: Let's try to complete the above code.



  2. Learning outcomes
    • How to dim a certain area.